<!-- 我是like组件 -->
<template>
    <div class="container" @click="onLike">
        <image
            class="container_image"
            :src="realLike ? yesSrc : noSrc"
            mode=""
        ></image>
        <text>{{ realCount }}</text>
    </div>
</template>

<script>
export default {
    props: {
        // 外面传进来的like
        like: {
            type: Boolean,// 定义数据的类型
            default: false,// 初始值，当外面没传这个值的时候，就是flase
        },
        // 外面传进来的数量
        count: {
            type: Number,// 定义数据的类型
            default: 0,// 初始值，当外面没传这个值的时候，就是0
        },
    },
    components: {},
    data () {
        //这里存放数据
        return {
            yesSrc: "../../static/like.png",
            noSrc: "../../static/no-like.png",
            realLike: this.like,
            realCount: this.count,
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {
        // 监听prop里面like的值
        like: {
            handler (v) {
                this.realLike = v;
            },
        },
        count: {
            handler (v) {
                this.realCount = v;
            },
        },
    },
    //方法集合
    //生命周期 - 创建完成（可以访问当前this实例）
    created () { },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted () { },
    methods: {
        // 点赞事件
        onLike () {
            this.realLike = !this.realLike;
            this.realCount = this.realLike ? this.realCount + 1 : this.realCount - 1;
            // 抛出给外面
            this.$emit("like", this.realLike);
        },

    },
    beforeCreate () { }, //生命周期 - 创建之前
    beforeMount () { }, //生命周期 - 挂载之前
    beforeUpdate () { }, //生命周期 - 更新之前
    updated () { }, //生命周期 - 更新之后
    beforeDestroy () { }, //生命周期 - 销毁之前
    destroyed () { }, //生命周期 - 销毁完成
    activated () { }, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>


<style lang='scss' scoped>
//@import url(); 引入公共css类
.container {
    display: inline-flex;
    flex-direction: row;
    padding: 10rpx;
    width: 90rpx;
}
.container_image {
    width: 16px;
    height: 14px;
}
.container text {
    line-height: 24rpx;
    color: #bbbbbb;
    position: relative;
    bottom: 10rpx;
    left: 6rpx;
}
</style>